<template>
  <div class="city-group" :data-ch="cityGroup.capital">
    <city-title :title='cityGroup.capital'></city-title>
    <div class="city-group-list">
      <div v-for='city in cityGroup.cities' :key="city.cname" class="city-group-cell" @click="selectCity(city)">{{city.cname}}</div>
    </div>
  </div>
</template>
<script>
import CityTitle from './CityTitle'
import mixin from './mixin'
export default {
  props: {
    cityGroup: Object
  },
  mixins: [mixin],
  components: {
    CityTitle
  }
}
</script>
<style lang="scss">
  .city-group{
    &-list{
      padding-left: 30px;
      padding-right: 50px;
    }
    &-cell{
      height: 80px;
      margin-right: 15px;
      line-height: 80px;
      border-bottom: 1px solid #c8c7cc;
      &:last-child{
        border-bottom:none;
      }
    }
  }
</style>
